//集中校验

$(() => {
  // get dom elem
  let $width     = $('#width'),
      $height    = $('#height'),
      $btnCal    = $('#calc')
      $perimeter = $('#perimeter'),
      $widthValidate = $('#width-validate'),
      $heightValidate =$('#height-validate'),
      $area      = $('#area');
      $form      = $('#main');


      $width.keypress((e)=>{
        // let key = e.key,
        //     val = e.target.value,
        //     pos = e.target.selectionStart;
        // // if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key))
        // // e.preventDefault();
        // // //合法字符 e ，科学计数法数字前中后都不能再出现e
        // if(val.indexOf('e') !== -1) 
        // e.preventDefault();

        // val =val.slice(0,pos) + key + val.slice(pos,val.length);
        // console.log(val);

        // if(!/^(0|[1-9]\d*)(\.\d+)?((e|E)(\+|-)?\d+)?$/.test(val))
        // e.preventDefault();
        filterKey(e);
      });
    $height.keypress((e)={
      filterKey(e);
    });
        

  //字段校验
  $width.focusout(()=>{
    if(!validate($width,$widthValidate)){
      $width.select();
    }
  });
  $height.focusout(()=>{
   if(!validate($height,$heightValidate)){
    $height.select();
   }
  });
  //冒泡机制
  // $form.focusout((e)=>{

  // })

  // calc button click
  $btnCal.click(()=> {
    let w = Number($width.val()),
        h = Number($height.val());

        //validate
    if(validate($width,$widthValidate)&&validate($height,$heightValidate)){
      let p = (w + h) * 2;
      let a = w * h;
      $perimeter.val(p);
      $area.val(a);
    }
  });
  function filterKey(e) {
    var pos = e.target.selectionStart,
        content = e.target.value;

    if(/[abcdf-zABCDF-Z`~!@#$%^&*()\-=_+[\]{}|;:'",<>/?\\]/.test(e.key)) {
      e.preventDefault();
      return;
    }

    if(e.key === '.') {
      if(pos === 0 || content.indexOf('.') !== -1) {
        e.preventDefault();
        return;
      }

      if(pos  === 1 && content.substring(0,1) === '-') {
        e.preventDefault();
        return;
      }
    }

    if(e.key === 'e') {
      if(pos === 0 || content.indexOf('e') !== -1 
          || content.indexOf('E') !== -1) {
        e.preventDefault();
        return;
      }

      if(pos === 1 && content.substring(0,1) === '-') {
        e.preventDefault();
        return;
      }
    }

    if(e.key === 'E') {
      if(pos === 0 || content.indexOf('e') !== -1 
          || content.indexOf('E') !== -1) {
        e.preventDefault();
        return;
      }

      if(pos === 1 && content.substring(0,1) === '-') {
        e.preventDefault();
        return;
      }
    }
  }
  function validate(input,output) {
    //is empty
    if(input.val()===''){
      output.html('该字段不能为空');
      return false;
    }else{
      output.html('');
    }
    // is number
    let val = Number($input.val()),
    if(isNaN(val)){
      output.html('该字段应该是数值');
    }else{
      output.html('');
      return true;
    }
  
    //is >0
    if(val<0){
      output.html('该数值不能小于0');
      return false;
    }else{
      output.html('');
    }
    return true;
  }
});
